<template>
  <!-- 第一部分：100%宽度图片区域 -->
  <div class="section first-section">
    <img
        src="http://localhost:8080/boke/myboke/uii.png"
        alt="顶部图片"
        class="full-width-img"
    />
  </div>

  <!-- 主容器 -->
  <div class="weibo-like-layout">
    <!-- 第二部分：五分布局（核心信息区） -->
    <div class="section second-section">
      <h3 class="section-title"></h3>
      <el-row :gutter="10" class="weibo-row">
        <!-- 1. 序号/状态区 -->
        <el-col :span="1">
          <div class="weibo-item">
            <div class="serial-number"></div>
          </div>
        </el-col>

        <!-- 2. 头像区 -->
        <el-col :span="3">
          <div class="weibo-item">
            <img :src="'/img'+user.tx" alt="用户头像" class="avatar"/>
          </div>
        </el-col>

        <!-- 3. 昵称&内容区 -->
        <el-col :span="12">
          <div class="weibo-item weibo-main">
            <p>
              <el-button plain @click="UpdateUser">
                编辑个人资料
              </el-button>
            </p>
            <el-dialog v-model="dialogFormVisible" title="个人资料编辑" width="500">
              <update-user-page
                  ref="updateUserRef"
                  @flushPage="doFlushPage"
                  @closeDialog="dialogFormVisible=false"
              ></update-user-page>
            </el-dialog>

            <div class="nickname">{{ user.nc }}
              <el-icon v-if="user.sex==='男'" style="color: #4eb7ff">
                <Female/>
              </el-icon>
              <el-icon v-else style="color:red">
                <Male/>
              </el-icon>
            </div>
            <div class="content">
              <p>{{ user.drb }}</p>
              <div style="color: #ff8200">
                <button class="interact-button" @click="showFenSi(user.id)">
                  ({{ allFenCount }})粉丝
                </button>
                <DetailFenPage ref="detailFenRef"/>

                <button class="interact-button" @click="showFollower(user.id)">
                  ({{ allFollowerCount }})关注
                </button>
                <DetailFollowerPage ref="detailFollowerRefRef"
                                    :parent-method="doFlushPage"/><!-- 关注抽屉-->
                点赞总数为{{ allLikeCount }}
              </div>
            </div>
          </div>
        </el-col>

        <!-- 4. 数字标识区 -->
        <el-col :span="3">
          <div class="weibo-item">
            <div class="number-tag"></div>
          </div>
        </el-col>

        <!-- 5. 额外操作/预留区 -->
        <el-col :span="5">
          <div class="weibo-item">
            <div class="extra-area">
              <el-row class="bottom-row">
                <el-col :span="24">
                  <div class="bottom-div"></div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 第四部分：空区域（可扩展） -->
    <div class="section">
      <div class="section-content empty-section">
        <my-post ref="detailMyPostRef"></my-post>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入依赖
import {nextTick, onMounted, ref} from 'vue';
import axios from 'axios';
import DetailFenPage from "./DetailFenPage.vue";
import DetailFollowerPage from './DetailFollowerPage.vue';
import MyPost from '../components/MyPost.vue';
import UpdateUserPage from './UpdateUserPage.vue'
// 登录状态管理
import {useUserStore} from '@/stores/user'
const userStore = useUserStore()
// 数据与组件引用
// 数据
const allLikeCount = ref(0);
const allFenCount = ref(0);
const allFollowerCount = ref(0);
//引用子组件
const detailFenRef = ref<InstanceType<typeof DetailFenPage>>();
const detailFollowerRefRef = ref<InstanceType<typeof DetailFollowerPage>>();
const detailMyPostRef = ref<InstanceType<typeof MyPost>>();
const updateUserRef = ref<InstanceType<typeof UpdateUserPage>>()
const dialogFormVisible = ref(false)

// 用户信息
const user = ref({
  id: '',
  yhm: '',
  phone: '',
  nc: '',
  drb: '',
  ip: '',
  sex: '',
  tx: ''
});

// 查询参数
// 关系关联参数
const fenSi = ref({userId: ''});
const follower = ref({fanId: ''});
const like = ref({postId: ''});

// 数据列表
//粉丝数据
const fenSiList = ref([]);
// 关注数据
const followerList = ref([]);
// 点赞数据
const likeList = ref([]);

// 初始化加载获取用户信息
const doUserList = async () => {
  const {data} = await axios.get('/api/user/'+userStore.id);
  user.value = data;

  // 赋值查询参数
  fenSi.value.userId = user.value.id;
  follower.value.fanId = user.value.id;
  like.value.postId = user.value.id;
  // 加载关联数据
  await Promise.all([
    loadFollowerData(),
    loadFenSiData(),
    loadLikeData()
  ]);
  await showDetail(user.value);
};

// 加载点赞数据
const loadLikeData = async () => {
  const {data} = await axios.get('/api/like', {params: like.value});
  likeList.value = data;
  allLikeCount.value = data.length;
};

// 加载粉丝数据
const loadFenSiData = async () => {
  const {data} = await axios.get('/api/relation', {params: fenSi.value});
  fenSiList.value = data;
  allFenCount.value = data.length;
};

// 加载关注数据
const loadFollowerData = async () => {
  const {data} = await axios.get('/api/relation', {params: follower.value});
  followerList.value = data;
  allFollowerCount.value = data.length;
};

// 显示详情，调用子组件方法传递数据
const showDetail = (obj) => {
  if (obj && detailMyPostRef.value) {
    detailMyPostRef.value.handleUpdateData(obj);
  }
};

// 打开粉丝抽屉
const showFenSi = (userId: string) => {
  if (userId && detailFenRef.value) {
    detailFenRef.value.handleDetailData(userId);
  }
};

// 打开关注抽屉
const showFollower = (userId: string) => {
  if (userId && detailFollowerRefRef.value) {
    detailFollowerRefRef.value.handleDetailData(userId);
  }
};
// 刷新页面
const doFlushPage = () => {
  doUserList()
}
// 编辑个人资料
const UpdateUser = () => {
  dialogFormVisible.value = true
  nextTick(() => {
    updateUserRef.value.handleUpdateUser(user.value);
  })
}
// 组件挂载时初始化
onMounted(() => {
  doUserList();
});
</script>
<style scoped>
/* 第一部分图片样式 */
.full-width-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 第一部分容器样式 */
.first-section {
  margin-bottom: 0; /* 移除底部间距 */
  background-color: #fff; /* 与第二部分背景一致 */
  border-radius: 8px 8px 0 0; /* 顶部圆角 */
  overflow: hidden; /* 隐藏图片超出部分 */
}

/* 主容器样式 */
.weibo-like-layout {
  width: 100%;
  min-height: 100vh;
  padding: 0 15px; /* 去除上下内边距 */
  box-sizing: border-box;
  background-color: #f0f2f5;
}

/* 通用区域样式 */
.section {
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* 第二部分特殊样式 */
.second-section {
  margin-top: 0; /* 移除顶部间距 */
}

/* 微博行布局 */
.weibo-row {
  width: 100%;
  background-color: #fff;
  border-radius: 0 0 8px 8px; /* 底部圆角，与第一部分衔接 */
  padding: 15px;
  box-sizing: border-box;
}

/* 项目容器 */
.weibo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 头像样式 */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* 按钮样式 */
.interact-button {
  margin-top: 10px;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: white;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.interact-button:hover {
  color: #ff8200;
}

/* 主内容区 */
.weibo-main {
  flex-direction: column;
  align-items: flex-start !important;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 空区域样式 */
.empty-section {
  width: 100%;
  height: 120px;
  background-color: #ffffff;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  box-sizing: border-box;
}
</style>